Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(css): export preprocessCSS API #10429

Merged
merged 1 commit into from
Oct 26, 2022
Merged

feat(css): export preprocessCSS API #10429

merged 1 commit into from
Oct 26, 2022

Conversation

bluwy
Copy link
Member

@bluwy bluwy commented Oct 11, 2022

Description

Export preprocessCSS(), which is calling compileCSS() without the urlReplacer function.

The urlReplacer is not ran as it uses the this context of Rollup, and it isn't necessary as the preprocessed CSS can run through Vite's pipeline to get it's URL replaced later.

This is helpful for template compilers like Svelte and Astro that can only parse pure CSS, so style tags need to be preprocessed.

Additional context

I'm currently testing this API in:


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@bluwy bluwy added feat: css p3-significant High priority enhancement (priority) labels Oct 11, 2022
@sapphi-red sapphi-red linked an issue Oct 17, 2022 that may be closed by this pull request
4 tasks
Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me since we already export transformWithEsbuild.

@patak-dev patak-dev merged commit 177b427 into main Oct 26, 2022
@patak-dev patak-dev deleted the preprocess-css branch October 26, 2022 09:35
@thilinadinith
Copy link

how to use this ? no documentation ?

@qodesmith
Copy link
Contributor

How do we use this feature?

@patricknelson
Copy link

Is there no documentation for this? Took me a while to end up at #8687. I’m happy to see this is implemented though… how do I use it? 😄

@patricknelson
Copy link

patricknelson commented Apr 29, 2023

Hmm, this usage in https://github.com/withastro/astro/blob/97f876abba31438ae4cc41fdbae276fbbc78e98b/packages/astro/src/core/compile/style.ts#L21 seems pretty low level.

I’m assuming @GrayYoung was looking for a method of telling Vite to compile separate .scss files to .css (actively during development, not just on build)* without having to import them in a .js file by using the configuration exposed in the main vite.config.js file. Does this change do that? If not, should #8687 be reopened?

Or (maybe better) does anyone know of alternative plugins available yet for Vite which can accomplish this? Just seems to make sense to me that this should be available to configure in this location (if not officially by Vite itself of course, then hopefully via a simple dedicated plugin).

Edit: Then again, maybe I’m being old fashioned 😅. Vite focuses primarily on intercepting and transforming for dev (I’m coming from ancient world of gulp/grunt). Seems Vite might already do something like this using something akin to <link rel="stylesheet" href="./style.scss" /> (c.f. https://slinkity.dev/docs/styling/#load-stylesheets). My use case is slightly different anyway, so continuing with sass --watch … during dev (continuing to reference the build .css for now, due to my complex project) then use rollup during prod build might be all I need anyway.

@patak-dev
Copy link
Member

Starting a discussion to gather feedback so we can move this feature out of experimental:

@PedroAugustoRamalhoDuarte

@patricknelson I have a similar problem, I need to use plain .css to insert into wkhtmltopdf in development.
I search a lot and cannot found a solution, i have to sticky with saas --watch

@patricknelson
Copy link

FWIW @PedroAugustoRamalhoDuarte, over the past year or so, I've found plain scripts in package.json to continue to work well when compiling/building separate .scss files. files to .css files.

It helps to also have a design pattern to include vite alongside those scripts as well so that you can just have one main build script that then delegates to other "sub" scripts like build:vite or build:sass (which you could run directly as well).

e.g. (untested, but simple enough to get the idea)

{
  "scripts": {
    "build": "npm run build:vite && npm run build:sass",
    "build:vite": "vite build",
    "build:sass": "npx sass ...",
    "dev": "concurrently --kill-others 'npm run dev:vite' 'npm run dev:sass'",
    "dev:vite": "vite",
    "dev:sass": "npx sass --watch ...",
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p3-significant High priority enhancement (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Compile an individual scss file into a css file
7 participants